<!DOCTYPE HTML>
<!--[if IE 7]>    <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js ie8 lt-ie9" lang="en"> <![endif]-->
<!--[if IE 9]>    <html class="no-js eq-ie9" lang="en"> <![endif]-->
<!--[if gt IE 9]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
	<meta charset="utf-8"/>
    <link rel="stylesheet" href="css/style.css" />
    <link rel="stylesheet" href="css/jplayer.blue.monday.css" />
    <script src="js/jquery-1.9.1.js"></script>
    <script src="js/jQuery.tubeplayer.js"></script>
    <script src="js/jquery.jplayer.js"></script>
    <script src="js/modernizr.js"></script>
    <script>
        $(function(){

          $("#jquery_jplayer_1").jPlayer({
            ready: function () {
              $(this).jPlayer("setMedia", {
                m4v: "http://www.jplayer.org/video/m4v/Big_Buck_Bunny_Trailer_480x270_h264aac.m4v",
                ogv: "http://www.jplayer.org/video/ogv/Big_Buck_Bunny_Trailer_480x270.ogv",
                poster: "http://www.jplayer.org/video/poster/Big_Buck_Bunny_Trailer_480x270.png"
              });
            },
            swfPath: "http://www.jplayer.org/latest/js/Jplayer.swf",
            supplied: "m4v, ogv",
            size: {width: "275px", height: "180px"}
          });

            $(".youtube-player-container").tubeplayer({
                width: 275,
                height: 175,
                allowFullScreen: "true",
                initialVideo: "DkoeNLuMbcI",
                preferredQuality: "default",
                onPlay: function(id){},
                onPause: function(){},
                onStop: function(){},
                onSeek: function(time){},
                onMute: function(){},
                onUnMute: function(){}
            });

        });
    </script>
    <title>StangaOne</title>
</head>
<body>
    <header>
        <nav>
            <div class="navWidth center">
                <h1>Training<span>Taks-HTML/CSS</span></h1>
                <ul>
                   <li class="showSubmenu navList">
                        <a href="#">Home</a>
                        <div class="submenu">
                            <ul>
                                <li><a href="javascript:;">submenu item 1</a></li>
                                <li><a href="javascript:;">submenu item 2</a></li>
                                <li><a href="javascript:;">submenu item 3</a></li>
                                <li class="nml"><a href="javascript:;">submenu item 4</a></li>
                            </ul>
                        </div>
                    </li>
                    <li class="navList"><a href="javascript:;">portfolio</a></li>
                    <li class="navList"><a href="javascript:;">blog</a></li>
                    <li class="navList"><a href="javascript:;">services</a></li>
                    <li class="navList"><a href="javascript:;">case studies</a></li>
                    <li class="navList nmr"><a href="contacts.html">contact us</a></li>
                </ul>
            </div>
        </nav>
        <form class="center">
            <fieldset>
                <span class="searchShadow"></span>
                <input type="text" class="searchField" placeholder="search..." />
                <input type="submit" class="searchButton" value=""/>
            </fieldset>
        </form>
        <div class="boxVideoCont center">
            <div class="boxVideo">
                <span class="tubePlayerShadow"></span>
                <span class="player2Shadow"></span>
                <span class="boxVideoLeftShadow"></span>
                <span class="boxVideoRightShadow"></span>
                <span class="boxVideoBottomShadow"></span>
                <h1>
                    Make Your Online Presence
                    <br>
                    Felt With the Help of Provus
                </h1>
                <div class="youtube-player-container">&nbsp;</div>
                <article class="artcleBoxVideo">
                    We not only prove our results...<br/>
                    we can <span class="tooltip" title="simple text">guarantee</span> them too!We<br/>
                    not only prove our results...<br/>
                    we can <span class="tooltip" title="simple text">guarantee</span> them too!We<br/>
                    not only prove our results...<br/>
                    we can <span class="tooltip" title="simple text">guarantee</span> them too!!
                </article>
                <div id="player_2">
                    <div id="jp_container_1" class="jp-video" style="width: 275px; display: block;" >
                        <div class="jp-type-single">
                            <div id="jquery_jplayer_1" class="jp-jplayer"></div>
                            <div class="jp-gui">
                                <div class="jp-video-play">
                                    <a href="javascript:;" class="jp-video-play-icon" tabindex="1">play</a>
                                </div>
                                <div class="jp-interface">
                                    <div class="jp-progress">
                                    <div class="jp-seek-bar">
                                        <div class="jp-play-bar"></div>
                                    </div>
                                  </div>
                                  <div class="jp-controls-holder">
                                      <ul class="jp-controls">
                                          <li><a href="javascript:;" class="jp-play" tabindex="1">play</a></li>
                                          <li><a href="javascript:;" class="jp-pause" tabindex="1">pause</a></li>
                                          <li><a href="javascript:;" class="jp-stop" tabindex="1">stop</a></li>
                                          <li><a href="javascript:;" class="jp-mute" tabindex="1" title="mute">mute</a></li>
                                          <li><a href="javascript:;" class="jp-unmute" tabindex="1" title="unmute">unmute</a></li>
                                          <li><a href="javascript:;" class="jp-volume-max" tabindex="1" title="max volume">max volume</a></li>
                                      </ul>
                                    <div class="jp-volume-bar">
                                        <div class="jp-volume-bar-value"></div>
                                    </div>
                                  </div>
                                </div>
                            </div>
                            <div class="jp-no-solution">
                                <span>Update Required</span>
                                To play the media you will need to either update your browser to a recent version or update your <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>.
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </header>
    <section class="sectionBox01 clear">
        <div class="boxArticles">
            <div class="leftArticles">
                <article class="mBottom bgArticle01">
                    <h1>Connect With Your Clients</h1>
                    <p>
                        Lorem ipsum dolor sit amet, consectetur<br />
                        adipisicing elit, sed do eiusmod tempor<br />
                        incididunt ut labore et dolore magna<br />
                        aliqua. Ut enim ad minim veniam.
                    </p>
                    <a href="javascript:;">Forest Nessit Allumn</a>
                </article>
                <article class="bgArticle02">
                    <h1>Connect With Your Clients</h1>
                    <p>
                        Lorem ipsum dolor sit amet, consectetur<br />
                        adipisicing elit, sed do eiusmod tempor<br />
                        incididunt ut labore et dolore magna<br />
                        aliqua. Ut enim ad minim veniam.
                    </p>
                    <a href="javascript:;">Nessit Allumn</a>
                </article>
            </div>
            <div class="rightArticles">
                <article>
                    <h1>What We Are All About At</h1>
                    <p>
                        Lorem ipsum dolor sit amet, ctur adipisicing elit, sed do eiusmod tempor incididunt<br />
                        ut labore et dolore magna aliqua. Ut enim ad veniam. Nevus magnu wuisit abre.<br />
                        Sed dest enim sit amet laborest doorest at dolor ajorem magna.
                    </p>
                    <a href="javascript:;">Sed Ut Perspiciatis Unden</a>
                </article>
                <div class="devideArticles"></div>
                <article>

                    <h1 class="widthElement">ExponetWorking For Your Clients</h1>
                    <p>
                        Many desktop publishing packages and web page editors now use Lorem Ipsum<br />
                        as their default model text, and a search for 'lorem ipsum' will uncover many web<br />
                        sites still in their infancy.
                    </p>
                    <ul>
                        <li>Web Designers</li>
                        <li>Ad Agenciess</li>
                        <li>Small Firms</li>
                        <li>Bloggers</li>
                        <li>Programmers</li>
                        <li>New Clients</li>
                    </ul>
                </article>
            </div>
        </div>
    </section>
    <section class="sectionBox02">
        <div class="contBoxArticles">
            <article class="articleLeftBox">
                <h1>Suggestions for <span>Exponet</span>?</h1>
                <p>
                    Sed ut perspiciatis unde omnis iste natus error
                    sit voluptatem accusantium doloremque
                    laudantium, totam rem aperiam.
                </p>
                <p>
                    Eaque ipsa quae ab illo inventore veritatis et
                    quasi architecto beatae vitae dicta sunt
                    explicabo est magna quisit.
                </p>
                <a href="#">Make a Suggestion</a>
            </article>
            <article class="articleCenterBox">
                <h1>Latest From the <span>Blog</span>?</h1>
                <a href="#" class="noBorder">Provus Attends Design Conference</a>
                <a href="#">Business Apps Made Easy</a>
                <a href="#">Interview With Provus President</a>
                <a href="#">Programmers Unite</a>
                <a href="#">Latest Client NuVorks Sounds Off</a>
            </article>
            <article class="articleRightBox">
                <h1>Latest From the <span>Blog</span>?</h1>
                <a href="#" class="liRight liBottom"><img src="img/img_1.png" alt="" /></a>
                <a href="#" class="liRight liBottom"><img src="img/img_2.png" alt="" /></a>
                <a href="#" class="liBottom"><img src="img/img_3.png" alt="" /></a>
                <a href="#" class="liRight"><img src="img/img_4.png" alt="" /></a>
                <a href="#" class="liRight"><img src="img/img_5.png" alt="" /></a>
                <a href="#"><img src="img/img_6.png" alt="" /></a>
            </article>
        </div>
    </section>
    <footer>
        <div class="footerBox">
            <p>Copyright © All Right Reserved</p>
            <nav>
                <a href="#">home</a>
                <a href="#">portfolio</a>
                <a href="#">blog</a>
                <a href="#">services</a>
                <a href="#">case studies</a>
                <a href="#" class="nmr">contact us</a>
            </nav>
        </div>
    </footer>
</body>
</html>